<!DOCTYPE html>
<html>
  <head>
    <title>Graph Editor</title>
    <meta charset="utf-8">
    <!-- Bower Libraries -->
    <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
    <script src="../bower_components/react/react-with-addons.js"></script>
    <script src="../bower_components/react/react-dom.js"></script>
    <script src="../bower_components/klayjs-noflo/klay-noflo.js"></script>
    <script src="../bower_components/hammerjs/hammer.min.js"></script>
    <script src="../bower_components/ease-djdeath/index.js"></script>
    <script src="../bower_components/react.animate-djdeath/react.animate.js"></script>
    
    <script src="jquery.js"></script><!-- add by haoning-->
    <!-- Browserify Libraries -->
    <script src="../build/noflo.js"></script>
    <!-- Custom elements -->
    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="./the-graph-editor.html">
    <link rel="import" href="../the-graph-nav/the-graph-nav.html">
    <!-- Fonts -->
    <!--link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css"-->
    <!--link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400' rel='stylesheet' type='text/css'-->
    <link rel="stylesheet" href="../bower_components/font-awesome/css/fontello.css">
    <style>
      @font-face {
        /* we want the svg version */
        font-family: 'FontAwesomeSVG';
        src: url('../bower_components/font-awesome/font/fontello.svg') format('svg'),
          url('../bower_components/font-awesome/font/fontello.eot') format('embedded-opentype'), 
          url('../bower_components/font-awesome/font/fontello.woff') format('woff'), 
          url('../bower_components/font-awesome/font/fontello.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
      }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <style>
      html, body {
        width: 100%;
        height: 100%;
      }
      body {
        background-color: hsl(189, 47%, 6%);
        font-family: "SourceCodePro",Helvetica,Arial,sans-serif;
        overflow: hidden;
      }
      #editor {
        background-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
      }
      #nav {
        position: absolute; 
        right: 0px; 
        bottom: 0px;
      }
      #testing {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <the-graph-editor id="editor" 
      width="800" height="600" 
      grid="72" 
      snap="36" 
      theme="dark">
    </the-graph-editor>
    <the-graph-nav id="nav" width="216" height="162"></the-graph-nav>
    <div id="testing" style="display:none">
      <!--button id="autolayout">autolayout</button-->
      <button id="theme">theme</button>
      <button id="focus">focus</button>
      <button id="refresh">refresh</button>
      <button id="show_graph">show_graph</button>
      <button id="create_node">createNode</button>
    </div>
    <div id="loading" style="position:absolute; top:10px; left:10px; background-color:white; padding:10px; border-radius:5px;">
      <img src="loading.gif"/>
      <div id="loading-message">loading custom elements...</div>
    </div>
    <script type="text/javascript">
      Polymer.veiledElements = ["the-graph-editor"];
      window.addEventListener('polymer-ready', function() {
        "use strict";
        var loadingMessage = document.getElementById("loading-message");
        loadingMessage.innerHTML = "loading graph data...";
        window.loadGraph = function (json) {
          var loading = document.getElementById("loading");
          loading.parentNode.removeChild(loading);
          var editor = document.getElementById('editor');
          /*
            add by ajc
            添加自定义事件listener
          */
          editor.addEventListener('nodes-select', function(e){
            console.log('选中的node >>>', e.detail)
          })
          editor.addEventListener('the-graph-edge-start', function(e){
            console.log('edges >>>', e.type, e.detail)
          })
          /*	var library = {
			  vm: {
			    name: 'vm',
			    description: 'virtual mechine',
			    icon: 'vm',
			    outports: [
			      {'name': 'out', 'type': 'all'}
			    ]
			  },
			  vswitch: {
			    name: 'switch',
			    description: 'ths switch',
			    icon: 'switch',
			    inports: [
			      {'name': 'in', 'type': 'all'}
			    ],
			    outports: [
			      {'name': 'out', 'type': 'all'}
			    ]
			  }
			};
		  editor.$.graph.library = library;
          var addnode = function () {
	          var id = Math.round(Math.random()*100000).toString(36);
	          var component = Math.random() > 0.5 ? 'vm' : 'vswitch';
	          var metadata = {
	            label: component,
	            x: Math.round(Math.random()*800),
	            y: Math.round(Math.random()*600)
	          };
	          var newNode = editor.nofloGraph.addNode(id, component, metadata);
	          return newNode;
	        };
	        document.getElementById("create_node").addEventListener("click", addnode);
	        */
          
          var graph = json.data ? JSON.parse(json.data.files['noflo.json'].content) : json;
          var graphString = JSON.stringify(graph);
          editor.graph = graph;
          
          // Component library
          // Attach editor to nav
          var nav = document.getElementById('nav');
          nav.editor = editor;
          var errorNodeId = null;
          var makeRandomError = function () {// modified  by haoning 告警
            if (!editor.nofloGraph) { return; }
            if (errorNodeId) {
              editor.removeErrorNode(errorNodeId);
            }
            var nodes = editor.nofloGraph.nodes;
            nodes.forEach(function (node) {//add by hao
            	if(node.metadata.vm_status=="ERROR"){
            		errorNodeId = node.id;
	                editor.addErrorNode(errorNodeId);
	                editor.updateErrorNodes();
            	}
            });
           
          };
          window.setInterval(makeRandomError, 3551);
          makeRandomError();
          // Autolayout button ####################################
          /*document.getElementById("autolayout").addEventListener("click", function () {
            editor.triggerAutolayout();
          });*/
          // Toggle theme
          //var theme = "dark";
          var theme = "dark";
          document.getElementById("theme").addEventListener("click", function () {
            theme = (theme==="dark" ? "light" : "dark");
            editor.theme = theme;
          });

          // Focus a node
          document.getElementById("focus").addEventListener("click", function () {
            var nodes = editor.nofloGraph.nodes;
            var randomNode = nodes[Math.floor(Math.random()*nodes.length)];
            editor.focusNode(randomNode);
          });

          // Refresh graph
          document.getElementById("refresh").addEventListener("click", function () {
            if (!editor.nofloGraph) { return; }
            editor.graph = JSON.parse(graphString);
           // editor.triggerAutolayout();
          });
         /* document.getElementById('create_node').addEventListener('click', function(){
            var id = Math.random().toString(36).substr(2)
            editor.nofloGraph.nodes.push({
              id: id,
              component: 'vm',
              metadata: {
                vm_id: id,
                vm_status: 'SHUTOFF',
                label: id,
                x: 300,
                y: 100
              }
            })
            editor.rerender()
          })*/
		  //add by hao
		  
		  
		  document.getElementById("show_graph").addEventListener("click", function () {
            console.log(editor.graph);
          });
          // Log some stuff
          window.editor = editor;
          console.log(editor);
        };
		/*###########数据获取第一种方法################### begin*/
       /* 
        var body = document.querySelector('body');
        var script = document.createElement('script');
        script.type = 'application/javascript';
        //script.src = 'photobooth.json.js';
        script.src = 'openstack.js';
        //script.src = 'clock.json.js';
        // Clock
        // script.src = 'https://api.github.com/gists/7135158?callback=loadGraph';
       // script.src = 'clock.json.js';
        // 
        // script.src = 'photobooth.json.js';
        // Gesture object building (lots of ports!)
        // script.src = 'https://api.github.com/gists/7022120?callback=loadGraph';
        // Gesture data gathering (big graph)
        // script.src = 'https://api.github.com/gists/7022262?callback=loadGraph';
        // Edge algo test
        //script.src = 'https://api.github.com/gists/6890344?callback=loadGraph';
        body.appendChild(script);*/
    	/*########################################## end*/


/*###########数据获取第二种方法############################### begin*/
		$.ajax({  
			type: 'GET',  
		//	url: "http://192.168.137.37:8081/awstack-resource/v1/topo?callback=loadGraph", 
		//	url: "http://192.168.137.37:8081/awstack-resource/v1/topo", 
			//url: "db.json", 
			url: "/topo/topo/data", 
			beforeSend: function(request) {
                  request.setRequestHeader("X-Auth-Token", "fe9b1b3575274c3185dab9779267c3c7");
            },
			/*success: function(data){  
				var loadjson=JSON.parse(data).data.data;
				console.log(JSON.stringify(loadjson));
				loadGraph(loadjson);
			},*/
	    	success: function(loadjson){  
	    		console.log("this.url:"+this.url);
				loadGraph(loadjson);
			},
			error:function(e){  
				alert("error:"+e);  
			},  
			dataType: "string"  
		});  
/*###########数据获取第二种方法############################### end*/		
		
		
		
		
        // Resize to fill window and also have explicit w/h attributes
        var editor = document.getElementById("editor");
        var resize = function () {
          editor.setAttribute("width", window.innerWidth);
          editor.setAttribute("height", window.innerHeight);
        };
        window.addEventListener("resize", resize);

        resize();
      });
      
    </script>
  </body>
</html>
